<template>
    <div class="el-col-xs-24 el-col-sm-24 el-col-md-12 el-col-md-offset-6" style="height: 100vh;position:absolute;overflow-y: auto;background-color: white;box-shadow: 6px 0 5px -5px #4F4F4F,-6px 0 5px -5px #4F4F4F;">
        <div style="height: 50px;background-color: #2F4056;">
            <div style="display:flex;align-items:center;height: 100%;margin-left: 30px;color:white;font-size:18px;font-weight: 500;position: relative;">
                <span>
                  <a href="javascript:history.back();" style="color: white">
                    <i class="el-icon-back" style="margin-right: 10px;">
                    </i>
                  </a>
                  新建 问卷
                </span>
                <el-button  icon="el-icon-circle-check" style="position: absolute;right: 15px;background-color: #2F4056;border: none;color: white" @click="save_form()">
                  体验发布
                </el-button>
            </div>
        </div>
        <!-- main -->
        <div style="padding: 20px 20px 30px;text-align: left">
            <el-form :rules="rules" label-width="0" :model="form">
                <span style="font-size: 14px">问卷标题</span>
                <el-form-item prop="name">
                    <el-input v-model="form.name" style="margin-top: 10px;" placeholder="请输入内容"></el-input>
                </el-form-item>
                <span style="font-size: 14px;">数据字段设计（问卷设计）</span>
                <div style="margin-top: 10px;margin-bottom:15px;background-color: #f3f4f5;border-radius: 4px;border-left:1px dashed #c2c2c2;border-right:1px dashed #c2c2c2;border-top:1px dashed #c2c2c2;border-bottom:1px dashed #c2c2c2;">
                    <span style="margin-left:5px;font-size: 10px;color: #666666">这里共有九种题型可选择，具有题型关联等特性</span>
                    <!-- 表单设计 -->
                    <div v-for="item in form_design_list" :id="item.index" style="width: 98%;margin-left: 1%;border-bottom:1px dashed #c2c2c2;">
                        <div style="height: 20px;margin-bottom: 5px;position: relative;margin-top: 10px;">
                            <span style="font-size: 12px;margin-left: 1%;font-weight: bold;float: left">{{item.data.title}}</span>
                            <div style="position: absolute;height:100%;width: 200px;right: 0;float: left;">
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 20px;float: left">
                                    <!-- 设置 -->
                                    <i style="font-size: 12px;color:#009688;" class="el-icon-setting" @click="setting(item)"></i>
                                </span>
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 20px;margin-left:10px;float: left">
                                    <!-- 关联 -->
                                    <i style="font-size: 12px;color:#666666;" class="el-icon-connection" @click="connection(item)"></i>
                                </span>
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 20px;margin-left:10px;float: left">
                                    <!-- 删除 -->
                                    <i style="font-size: 12px;color:#666666;" class="el-icon-close" @click="delete_sub(item)"></i>
                                </span>
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 20px;margin-left:10px;float: left">
                                    <!-- 上移 -->
                                    <i disabled="" style="font-size: 12px;color:#666666;" class="el-icon-top" @click="moue_up_submit(item)"></i>
                                </span>
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 20px;margin-left:10px;float: left">
                                    <!-- 下移 -->
                                    <i disabled="" style="font-size: 12px;color:#666666;" class="el-icon-bottom" @click="moue_down_submit(item)"></i>
                                </span>
                                <span style="display:flex;justify-content:center;align-items:center;height:100%;width: 60px;float: left">
                                    <el-checkbox v-model="item.item_required" style="font-size: 12px;color:#666666;">必填</el-checkbox>
                                </span>
                            </div>
                        </div>
                        <el-form-item style="padding-bottom: 5px;margin-bottom: 10px">
                            <!-- 输入框 -->
                            <el-input v-if="item.type=== 'input_box'" style="" :placeholder="item.data.placeholder" ></el-input>
                            <!-- 单项选择 -->
                            <el-radio v-if="item.type === 'single_choice'" style="" v-for="single_choice in item.data.list" :key="single_choice.index" v-model="item.value" :label="single_choice.display">{{single_choice.display}}</el-radio>
                            <!-- 多项选择 -->
                            <el-checkbox v-if="item.type === 'multiple_choice'" style="" v-for="multiple_choice in item.data.list" :key="multiple_choice.index">{{multiple_choice.display}}</el-checkbox>
                            <!-- 下拉框 -->
                            <el-select v-if="item.type === 'select'" style="width: 100%" v-model="item.value" :placeholder="item.data.placeholder" value="">
                                <el-option v-for="select in item.data.list" :key="select.value" :label="select.value" :value="select.value"></el-option>
                            </el-select>
                            <!-- 上传附件 -->
                            <el-upload v-if="item.type === 'upload'" disabled="" style="" class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
<!--                                <i class="el-icon-upload"></i>-->
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                <div class="el-upload__tip" slot="tip">{{item.data.placeholder}}</div>
                            </el-upload>
                            <!-- 日期时间 -->
                            <el-date-picker v-if="item.type === 'date_time'"  style="width: 100%" v-model="item.value" type="datetime" :placeholder="item.data.placeholder"></el-date-picker>
                            <!-- 多行文本 -->
                            <el-input v-if="item.type === 'mul_input_box'"  type="textarea" :rows="3" :placeholder="item.data.placeholder" v-model="item.value"></el-input>
                            <!-- 地图选点 -->
                            <el-input v-if="item.type=== 'map_select'" disabled="" style="" :placeholder="item.data.placeholder" ></el-input>
                            <!-- 自动定位 -->
                            <el-input v-if="item.type=== 'map_location'" disabled="" style="" :placeholder="item.data.placeholder" ></el-input>
                        </el-form-item>
                        <!-- 关联条件 -->
                        <span v-if="item.isContacted" style="font-size: 12px;margin-left: 1%;color: red">
                            {{form_design_list[item.connection.out_side].data.title}}
                            <!-- 下拉框特殊处理 -->
                            <span v-for="inside in item.connection.inside_index" v-if="inside.connection_value && form_design_list[item.connection.out_side].type !== 'select'">{{form_design_list[item.connection.out_side].data.list[inside.index].display}},</span>
                            <span v-for="inside in item.connection.inside_index" v-if="inside.connection_value && form_design_list[item.connection.out_side].type === 'select'">{{form_design_list[item.connection.out_side].data.list[inside.index].value}},</span>
                            被选中时才显示
                        </span>
                    </div>
                    <div style="display:flex;justify-content:center;align-items:center;height: 30px;width: 100%;">
                        <span style="font-size: 14px;color: red;cursor:pointer;" @click="drawer = true">点击新增一道问题</span>
                    </div>
                </div>
            </el-form>
        </div>
        <!-- 底部抽屉 -->
        <el-drawer style="cursor:pointer;border-radius: 4px;" size="400px" title="新增一题，选择题型" :visible.sync="drawer" direction="btt" :before-close="handleClose">
            <div style="display:flex;justify-content:center;align-items:center;height: 100px;width: 100%;">
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="input_box_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-edit-outline" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">输入框</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="single_choice_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-circle-check" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">单项选择</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="multiple_choice_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-check" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">多项选择</el-col>
                        </el-row>
                    </a>
                </div>
            </div>
            <div style="display:flex;justify-content:center;align-items:center;height: 100px;width: 100%;">
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="select_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-arrow-down" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">下拉列表</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="upload_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-link" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">上传附件</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="date_time()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-date" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">日期时间</el-col>
                        </el-row>
                    </a>
                </div>
            </div>
            <div style="display:flex;justify-content:center;align-items:center;height: 100px;width: 100%;">
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="mul_input_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-document" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">多行文本</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="map_select_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-map-location" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">地图选点</el-col>
                        </el-row>
                    </a>
                </div>
                <div style="display:flex;justify-content:center;align-items:center;height: 100%;width: 30%;">
                    <a @click="map_location_click()">
                        <el-row style="height: 100px;width: 100px;">
                            <el-col style="height: 30px;width: 100%;margin-top: 10%"><i class="el-icon-location-outline" style="font-size: 20px;color: #409EFF"></i></el-col>
                            <el-col style="height: 30px;width: 100%">自动定位</el-col>
                        </el-row>
                    </a>
                </div>
            </div>
        </el-drawer>
        <!-- 设置弹出框 -->
        <el-dialog title="字段设置" style="text-align: left" :visible.sync="setting_box" width="300px" :before-close="handleClose">
                <div v-if="setting_item.type === 'input_box'">
                   <el-form>
                       <span style="font-size: 12px;color: #666666">标题</span>
                       <el-form-item>
                           <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                       </el-form-item>
                       <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                       <el-form-item>
                           <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                       </el-form-item>
                   </el-form>
               </div>
                <div v-if="setting_item.type === 'single_choice'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <div v-for="set in setting_item.data.list">
                            <span style="margin-top: 10px;font-size: 12px;color: #666666">选项{{set.index+1}}</span>
                            <el-form-item>
                                <el-input style="margin-top: 10px;width: 70%" v-model="set.display"></el-input>
                                <i v-if="set.index === 0" style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-plus-outline" @click="setting_single_add_options()"></i>
                                <i v-else style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-close" @click="setting_single_delete_options(set.index)"></i>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'multiple_choice'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <div v-for="set in setting_item.data.list">
                            <span style="margin-top: 10px;font-size: 12px;color: #666666">选项{{set.index+1}}</span>
                            <el-form-item>
                                <el-input style="margin-top: 10px;width: 70%" v-model="set.display"></el-input>
                                <i v-if="set.index === 0" style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-plus-outline" @click="setting_multiple_add_options()"></i>
                                <i v-else style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-close" @click="setting_single_delete_options(set.index)"></i>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'select'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <div v-for="set in setting_item.data.list">
                            <span style="margin-top: 10px;font-size: 12px;color: #666666">选项{{set.index+1}}</span>
                            <el-form-item>
                                <el-input style="margin-top: 10px;width: 70%;" v-model="set.value"></el-input>
                                <i v-if="set.index === 0" style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-plus-outline" @click="setting_select_add_options()"></i>
                                <i v-else style="font-size: 20px;margin-left: 10%;" class="el-icon-circle-close" @click="setting_single_delete_options(set.index)"></i>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'upload'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'date_time'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'mul_input_box'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'map_select'">
                    <el-form>
                        <span style="font-size: 12px;color: #666666">标题</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                        </el-form-item>
                        <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                        <el-form-item>
                            <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="setting_item.type === 'map_location'">
                <el-form>
                    <span style="font-size: 12px;color: #666666">标题</span>
                    <el-form-item>
                        <el-input style="margin-top: 10px;" v-model="setting_item.data.title"></el-input>
                    </el-form-item>
                    <span style="margin-top: 10px;font-size: 12px;color: #666666">提示信息</span>
                    <el-form-item>
                        <el-input style="margin-top: 10px;" v-model="setting_item.data.placeholder"></el-input>
                    </el-form-item>
                </el-form>
            </div>
               <span slot="footer" class="dialog-footer">
                <el-button type="primary" style="background-color: #5FB878" @click="setting_submit()">确 定</el-button>
              </span>
        </el-dialog>
        <!-- 关联弹出框 -->
        <el-dialog title="关联设置" style="text-align: left" :visible.sync="connection_box" width="300px" :before-close="handleClose">
            <span>下方值被选中时才允许填写</span>
            <div v-for="con in connection_item">
                <el-form style="margin-top: 10px;">
                    <el-radio style="" :label="con.index" v-model="connection_item_form.value">{{con.data.title}}</el-radio>
                    <el-form-item>
                        <!-- 单选框 -->
                        <el-checkbox v-if="con.type === 'single_choice' && connection_item_form.value === con.index" style="" v-for="single_choice in con.data.list" :key="single_choice.index" v-model="single_choice.connection_value"  @change="connection_click(con.index,single_choice.index,single_choice.connection_value)">{{single_choice.display}}</el-checkbox>
                        <!-- 多选框 -->
                        <el-checkbox v-if="con.type === 'multiple_choice' && connection_item_form.value === con.index" style="" v-for="multiple_choice in con.data.list" :key="multiple_choice.index" v-model="multiple_choice.connection_value" @change="connection_click(con.index,multiple_choice.index,multiple_choice.connection_value)">{{multiple_choice.display}}</el-checkbox>
                        <!-- 下拉框 -->
                        <el-checkbox v-if="con.type === 'select' && connection_item_form.value === con.index" style="" v-for="select in con.data.list" :key="select.index" v-model="select.connection_value" @change="connection_click(con.index,select.index,select.connection_value)">{{select.value}}</el-checkbox>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="connection_click_canal()">取 消</el-button>
                <el-button type="primary" style="background-color: #5FB878" @click="connection_click_submit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除弹出框 -->
        <el-dialog title="提示" style="text-align: left" :visible.sync="delete_box" width="300px" :before-close="handleClose">
            <span>确认删除？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delete_box = false">取 消</el-button>
                <el-button type="primary" style="background-color: #5FB878" @click="delete_submit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 保存弹出框 -->
        <el-dialog title="提示" style="text-align: left" :visible.sync="form_save_box" width="300px" :before-close="handleClose">
            <span>将以下链接复制给学生,或扫描此二维码填写问卷</span><br>
            <span style="margin-top: 10px;"><a :href="form_display">{{form_display}}</a></span>
            <div style="margin-top:20px;display:flex;justify-content:center;align-items:center;width: 100%;height: 200px;">
                <div style="width: 200px;height: 200px;">
                    <vue-qr style="width: 100%;height: 100%" :text="form_display" :size="200" :margin="0"></vue-qr>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="form_save_box = false">取 消</el-button>
                <el-button type="primary" style="background-color: #5FB878" @click="form_save_box = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios";
    import {Base64} from "js-base64";
    import VueQr from 'vue-qr'
    export default {
        name: "Form_design",
        components:{ VueQr },
        data(){
            return{
                logo: "https://3-14-1259605885.cos.ap-beijing.myqcloud.com/login_bindApp_icon/default.png",
                /** 是否显示 保存 弹出框 */
                form_save_box: false,
                /** 生成表单链接 */
                form_display: '',
                /** 是否显示底部抽屉 */
                drawer: false,
                /** 是否显示 字段设置 弹出框 */
                setting_box: false,
                /** 是否显示 关联 弹出框 */
                connection_box: false,
                /** 是否显示 删除 弹出框 */
                delete_box: false,
                /** 上移 下移 移动动画 */
                move_animation: {},
                /** 字段设置 弹出框 的数据类型  <=> 表单设计数组 的数据类型*/
                setting_item: {},
                /** 关联 弹出框 的数据类型  <=> 表单设计数组 的数据类型*/
                connection_item: [],
                /** 关联 弹出框 表单 */
                connection_item_form: {
                    value: '',
                    /** 自身 index */
                    this_index: '',
                    /** 关联的外 index */
                    out_index: '',
                    /** 关联的内 index */
                    inside_index: '',
                    /** 关联类型 单选 多选 下拉框*/
                    type: ''
                },
                /** 删除 弹出框 的数据类型  <=> 表单设计数组 的数据类型*/
                delete_item: {},
                /** 表单内容 */
                form:{
                    name: '',
                    form_design_list: [],
                },
                /** 表单设计数组 的数据类型 */
                form_design_list:[],
                /** 表单校验规则 */
                rules: {
                    name: [
                        {
                            required: true,message: '请输入内容', trigger: 'blur'
                        }
                    ],
                }
            }
        },
        methods:{
            /** 输入框 生成 */
            input_box_click: function(){
                let input_box = {
                    type : 'input_box',
                    data : {
                        title : '文本',
                        placeholder : '请输入文本'
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length,
                };
                /** 添加输入框 */
                this.form_design_list.push(input_box);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 单项选择 生成 */
            single_choice_click: function(){
                let single_choice = {
                    type : 'single_choice',
                    data : {
                        title : '单选',
                        list: [
                            {
                                index: 0,
                                display: '选项1'
                            },
                            {
                                index: 1,
                                display: '选项2'
                            }
                        ]
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length
                };
                /** 添加输入框 */
                this.form_design_list.push(single_choice);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 多项选择 生成 */
            multiple_choice_click: function(){
                let single_choice = {
                    type : 'multiple_choice',
                    data : {
                        title : '多选',
                        list: [
                            {
                                index: 0,
                                value: false,
                                display: '选项1'
                            },
                            {
                                index: 1,
                                value: false,
                                display: '选项2'
                            }
                        ]
                    },
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length
                };
                /** 添加输入框 */
                this.form_design_list.push(single_choice);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 下拉框 生成 */
            select_click: function(){
                let select = {
                    type : 'select',
                    data : {
                        title : '下拉框',
                        placeholder: '请选择',
                        list: [{
                            index: 0,
                            /** 数据绑定value 用于 下拉框中 正常显示的 label = value  用于 表单关联逻辑中 显示的 display = value */
                            value: '选项1',
                        }, {
                            index: 1,
                            value: '选项2',
                        }],
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length
                };
                /** 添加下拉框 */
                this.form_design_list.push(select);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 上传组件 生成 */
            upload_click: function(){
                let upload = {
                    type : 'upload',
                    data : {
                        title : '附件',
                        placeholder: '按要求上传附件',
                        /** 上传的文件 文件名 */
                        file_name: '',
                    },
                    /** 上传附件 上传后的连接 */
                    value: [],
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length
                };
                /** 添加输入框 */
                this.form_design_list.push(upload);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 日期时间 生成 */
            date_time: function(){
                let date_time = {
                    type : 'date_time',
                    data : {
                        title : '日期时间',
                        placeholder: '请选择日期时间',
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length
                };
                /** 添加输入框 */
                this.form_design_list.push(date_time);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 多行文本 生成*/
            mul_input_click: function(){
                let mul_input_box = {
                    type : 'mul_input_box',
                    data : {
                        title : '多行文本',
                        placeholder : '请输入文本'
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length,
                };
                /** 添加输入框 */
                this.form_design_list.push(mul_input_box);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 地图选点 生成*/
            map_select_click: function(){
                let map_select = {
                    type : 'map_select',
                    data : {
                        title : '地图选位置',
                        placeholder : '自动显示地图并获取位置'
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length,
                };
                /** 添加输入框 */
                this.form_design_list.push(map_select);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 自动定位 生成*/
            map_location_click: function(){
                let map_location = {
                    type : 'map_location',
                    data : {
                        title : '自动获取位置',
                        placeholder : '系统自动获取位置信息'
                    },
                    value: '',
                    /** 是否 必填 */
                    item_required: false,
                    /** 是否 关联 */
                    isContacted: false,
                    /** 在form_design_list 中下标 */
                    index : this.form_design_list.length,
                };
                /** 添加输入框 */
                this.form_design_list.push(map_location);
                /** 抽屉 隐藏 */
                this.drawer = false;
            },
            /** 点开设置 弹出框 */
            setting: function(item){
                this.setting_item = item;
                this.setting_box = true;
            },
            /** 设置 单选 添加选项 */
            setting_single_add_options: function () {
                let option = {
                    display: '新增选项',
                    index: (this.setting_item.data.list.length)
                };
                this.setting_item.data.list.push(option);
            },
            /** 设置 单选 多选 下拉框 删除选项 */
            setting_single_delete_options(index){
                if (index > -1) {
                    /** 删除选项 */
                    this.setting_item.data.list.splice(index, 1);
                    /** 改变 下标为index的选项 之后 的选项下标 */
                    if (index <= this.setting_item.data.list.length - 1) {
                        for (let i=index;i<this.setting_item.data.list.length;i++){
                            this.setting_item.data.list[i].index--;
                        }
                    }
                }
            },
            /** 设置 多选 添加选项 */
            setting_multiple_add_options: function () {
                let option = {
                    display: '新增选项',
                    value: false,
                    index: (this.setting_item.data.list.length)
                };
                this.setting_item.data.list.push(option);
            },
            /** 设置 下拉框 添加选项 */
            setting_select_add_options: function () {
                let option = {
                    value: '新增选项',
                    index: (this.setting_item.data.list.length)
                };
                this.setting_item.data.list.push(option);
            },
            /** 设置 提交 */
            setting_submit: function () {
                this.setting_item = {};
                this.setting_box = false;
            },
            /** 点开关联 弹出框 */
            connection: function(item){
                this.connection_item = [];
                /** 判断当前表单是否有 单选 多选 下拉框 */
                if (item.type === 'single_choice' || item.type === 'multiple_choice' || item.type === 'select'){
                    for(let i=0;i<this.form_design_list.length;i++){
                        if (this.form_design_list[i].index === item.index){
                        }else {
                            if (this.form_design_list[i].type === 'single_choice' || this.form_design_list[i].type === 'multiple_choice' || this.form_design_list[i].type === 'select'){
                                /** js对象复制的方法 */
                                let connection = JSON.parse(JSON.stringify(this.form_design_list[i]));
                                for (let i=0;i<connection.data.list.length;i++){
                                    connection.data.list[i].connection_value = false;
                                }
                                this.connection_item.push(connection);
                            }
                        }
                    }
                }else {
                    for(let i=0;i<this.form_design_list.length;i++){
                        if (this.form_design_list[i].type === 'single_choice' || this.form_design_list[i].type === 'multiple_choice' || this.form_design_list[i].type === 'select'){
                            /** js对象复制的方法 */
                            let connection = JSON.parse(JSON.stringify(this.form_design_list[i]));
                            for (let i=0;i<connection.data.list.length;i++){
                                connection.data.list[i].connection_value = false;
                            }
                            this.connection_item.push(connection);
                        }
                    }
                }
                this.connection_box = true;
                this.connection_item_form.this_index = item.index;
            },
            /** 关联弹出框 选项 被选择时  out_index 在form_design_list中的下标  inside_index 在 form_design_list_item 中的 下标 */
            connection_click: function(out_index,inside_index,value){
                for (let i=0;i<this.connection_item.length;i++){
                    if (this.connection_item[i].index !== out_index){
                        console.log(this.connection_item[i].index);
                        for(let j=0;j<this.connection_item[i].data.list.length;j++){
                            this.connection_item[i].data.list[j].connection_value = false;
                        }
                    }
                }
                if (value){
                    this.connection_item_form.out_index = out_index;
                    /** 将 connection_item[i].data.list 复制到 connection_item_form.inside_index */
                    for(let i=0;i<this.connection_item.length;i++){
                        if (this.connection_item[i].index === out_index){
                            this.connection_item_form.inside_index = this.connection_item[i].data.list;
                            this.connection_item_form.type = this.connection_item[i].type;
                        }
                    }
                    // this.connection_item_form.inside_index = inside_index;
                }
                // console.log(this.connection_item[i].type);
            },
            /** 关联 弹出框 取消 */
            connection_click_canal: function(){
                this.connection_item_form.connection_value = '';
                this.connection_item_form.this_index = '';
                this.connection_item_form.out_index = '';
                this.connection_item_form.inside_index = '';
                this.connection_box = false;
            },
            /** 关联 弹出框 确定 */
            connection_click_submit: function(){
                if (this.connection_item.length>0){
                    if (this.connection_item_form.out_index !== ''){
                        /** 在 connection_item_form 中，当connection_item_form.out_side - (connection_item_form.inside_index[i].value === true) 时 connection_item_form.this_index 才允许被填写 */
                        this.form_design_list[this.connection_item_form.this_index].connection = {
                            out_side : this.connection_item_form.out_index,
                            inside_index : this.connection_item_form.inside_index,
                            type: this.connection_item_form.type,
                        };
                        /** 表示当前组件 存在关联条件 */
                        this.form_design_list[this.connection_item_form.this_index].isContacted = true;
                        this.connection_item_form.connection_value = '';
                        this.connection_item_form.this_index = '';
                        this.connection_item_form.out_index = '';
                        this.connection_item_form.inside_index = '';
                        this.connection_item_form.type = '';
                    }
                }
                this.connection_box = false;
            },
            /** 点开删除 弹出框 */
            delete_sub: function (item) {
                this.delete_item = item;
                this.delete_box = true;
            },
            /** 删除 提交 */
            delete_submit: function () {
                this.form_design_list.splice(this.delete_item.index,1);
                for (let i=this.delete_item.index;i < this.form_design_list.length;i++){
                    this.form_design_list[i].index = this.form_design_list[i].index - 1;
                }
                this.delete_item = {};
                this.delete_box = false;
            },
            /** 上移 实际操作*/
            moue_up: function (item) {
                /** 改变index */
                this.form_design_list[item.index - 1].index = this.form_design_list[item.index - 1].index + 1;
                this.form_design_list[item.index].index = this.form_design_list[item.index].index - 1;
                /** 改变位置 */
                this.form_design_list[(item.index - 1) + 1] = this.form_design_list.splice((item.index) + 1, 1, this.form_design_list[(item.index - 1) + 1])[0];
                /** 添加动画 */
                document.getElementById(item.index).setAttribute("class","move_animation");
                /** 延时 删除动画  */
                setTimeout(() =>{
                    document.getElementById(item.index).setAttribute("class","");
                },1000);
            },
            /** 上移 */
            moue_up_submit: function(item){
                if (item.index > 0){
                    let connection_list = [];
                    /** 检查当前 表单中 是否含有关联逻辑 */ /** 此处还要判断存在一个关联逻辑 还是多个关联逻辑 */
                    for (let i=0;i<this.form_design_list.length;i++){
                        if (this.form_design_list[i].isContacted){
                            connection_list.push(this.form_design_list[i]);
                        }
                    }
                    console.log(connection_list);
                    /** 该表单中有一个组件存在关联条件 */
                    if (connection_list.length !== 0){
                        /** 当前表单中 存在关联逻辑 */
                        this.message("表单中存在关联逻辑时,无法修改位置,可将该题型删除后重新添加以改变位置！","warning");
                        // for (let i=0;i<connection_list.length;i++){
                        //     if (item.index === connection_list[i].connection.out_side) {
                        //         /** 当前选中 item 为 关联逻辑中的 connection.out_side */
                        //         connection_list[i].connection.out_side--;
                        //         this.moue_up(item);
                        //     }else if ((item.index-1) === connection_list[i].connection.out_side) {
                        //         /** 当前选中 item + 1 后 ，为 关联逻辑中的 connection.out_side */
                        //         connection_list[i].connection.out_side++;
                        //         for(let j=0;j<this.form_design_list.length;j++){
                        //             if (this.form_design_list[j].isContacted && this.form_design_list[j].connection.out_side === item.index){
                        //                 this.form_design_list[j].connection.out_side--;
                        //             }
                        //         }
                        //         // this.moue_up(item);
                        //     }else if (item.index === connection_list[i].index || (item.index+1) === connection_list[i].index) {
                        //         /** 当前选中 item 或 item + 1 后 ，为 关联逻辑中的 index */
                        //         this.moue_up(item);
                        //     }
                        // }
                    /** 该表单中有多个组件存在关联条件 */
                    } else {
                        /** 当前表单中 不存在关联逻辑 */
                        this.moue_up(item);
                    }
                }
            },
            /** 下移 实际操作 */
            moue_down: function (item) {
                /** 改变index */
                this.form_design_list[item.index].index = this.form_design_list[item.index].index + 1;
                this.form_design_list[(item.index - 1) + 1].index = this.form_design_list[(item.index - 1) + 1].index - 1;
                /** 改变位置 */
                this.form_design_list[(item.index) - 1] = this.form_design_list.splice((item.index), 1, this.form_design_list[(item.index) - 1])[0];
                /** 添加动画 */
                document.getElementById(item.index).setAttribute("class","move_animation");
                /** 延时 删除动画  */
                setTimeout(() =>{
                    document.getElementById(item.index).setAttribute("class","");
                },1000);
            },
            /** 下移 */
            moue_down_submit: function(item){
                if (item.index < this.form_design_list.length-1){
                    let connection_list = [];
                    /** 检查当前 表单中 是否含有关联逻辑 */
                    for (let i=0;i<this.form_design_list.length;i++){
                        if (this.form_design_list[i].isContacted){
                            connection_list.push(this.form_design_list[i]);
                        }
                    }
                    if (connection_list.length !== 0){
                        /** 当前表单中 存在关联逻辑 */
                        this.message("表单中存在关联逻辑时,无法修改位置,可将该题型删除后重新添加以改变位置！","warning");
                        // for (let i=0;i<connection_list.length;i++){
                        //     if (item.index === connection_list[i].connection.out_side) {
                        //         /** 当前选中 item 为 关联逻辑中的 connection.out_side */
                        //         connection_list[i].connection.out_side++;
                        //         this.moue_down(item);
                        //     }else if ((item.index+1) === connection_list[i].connection.out_side) {
                        //         /** 当前选中 item + 1 后 ，为 关联逻辑中的 connection.out_side */
                        //         connection_list[i].connection.out_side--;
                        //         this.moue_down(item);
                        //     }else if (item.index === connection_list[i].index || (item.index+1) === connection_list[i].index) {
                        //         /** 当前选中 item 或 item + 1 后 ，为 关联逻辑中的 index */
                        //         this.moue_down(item);
                        //     }
                        // }
                    } else {
                        /** 当前表单中 不存在关联逻辑 */
                        this.moue_down(item);
                    }
                }
            },
            /** 保存表单 */
            save_form: function () {
                if (this.form_design_list.length!==0){
                    if (this.form.name === ''){
                      this.message("请输入信息收集标题","warning");
                    }else {
                      this.form.form_design_list = this.form_design_list;
                        axios.post("http://49.232.95.128:10007/form/submit", {
                          form_data: this.form,
                          form_title: this.form.name,
                        }).then((response) => {
                            console.log(response)
                            this.form_display = 'http://form.information1.design/dist/#/form-display/' + response.data.data + "/";
                            // this.form_display = 'http://sso1.timkj.cn/form-design/dist/#/form-display/' + response.data.data.id + "/";
                            this.form_save_box = true;
                        }).catch((error) => {
                            console.log(error);
                        });
                    }
                }
            },
            /** 底部抽屉关闭前的钩子 */
            handleClose: function (done) {
                  done()
              },
            /** 消息提示 */
            message: function(message,type){
                  this.$message({
                      message: message,
                      type: type
                  });
              },
          },
          created: function () {
            //获取系统中的问卷
          },
          watch:{

          }
    }
</script>

<style scoped>
    /** 上移 下移 移动 动画 */
    @keyframes move {
        50%  { width: 90%;margin-left: 5%;background-color: #5FB878 }
        100% { width: 98%;margin-left: 1%; }
    }
    /** 底部抽屉高度 */
    .el-drawer__body{ height: 500px; }
    /** 上移 下移 移动 动画 */
    .move_animation{ animation: move 1s;-moz-animation: move 1s;	/* Firefox */-webkit-animation: move 1s;	/* Safari 和 Chrome */-o-animation: move 1s;	/* Opera */ }
    /** 上传附件组件 */
    .upload-demo >>> .el-upload{ width: 100%;height: 40px; }
    .upload-demo >>> .el-upload-dragger{ width: 100%;height: 40px;border-radius: 1px; }
</style>
